<!--
 * @Author: ChenCaoYang
 * @Date: 2021-05-28 22:37:44
 * @LastEditors: ChenCaoYang
 * @LastEditTime: 2021-06-14 17:51:30
-->
<template>
  <div class="container">
    <h3>物流详情</h3>
    <el-divider></el-divider>
    <div class="content">
      <h4>收货地址</h4>
      <div class="user_info">
        <p class="user_name">{{ consigneeName }} {{ consigneeTele }}</p>
        <p class="user_address">
          {{ consigneeAddress }}
        </p>
      </div>
      <h4>顺丰速运</h4>
      <div class="odd_number">
        运单号：{{ info }} <span class="copy" @click="copyText()">复制</span>
      </div>
      <el-divider></el-divider>
      <div class="steps">
        <div class="item">
          <p>2020-5-12 12:58:56 顺丰速运 已收取快件</p>
        </div>
        <div class="item">
          <p>
            2020-5-12 12:58:56
            快件在【南宁江南集散中心】已装车，准备发往【南宁乾坤江南速运营业点】
          </p>
        </div>
        <div class="item item_over">
          <p>
            2020-5-12 12:58:56
            快件到达【南宁六景集散中心】快件交给罗贵，正在派送中（联系电话：15978154512）
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LogisticsDetails', //物流详情
  data() {
    return {
      info: 'SF1196748835911',
      id: 0,
      consigneeAddress:
        '成都市都江堰青城山东软学院大三路四川省成都市都江堰市青城山镇东软大道1号',
      consigneeName: '龙海天',
      consigneeTele: '15687845949',
      expressCompany: '顺丰速运',
      logisticsInfo: {
        body: '',
        error: '',
        status: 0,
      },
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.getData()
  },
  methods: {
    copyText() {
      var input = document.createElement('input') // 直接构建input
      input.value = this.info // 设置内容
      document.body.appendChild(input) // 添加临时实例
      input.select() // 选择实例内容
      document.execCommand('Copy') // 执行复制
      document.body.removeChild(input) // 删除临时实例
      alert('复制成功')
    },
    getData() {
      this.$http
        .fetch(this.$apiPath.getLogisticsInfo, {
          method: 'GET',
          params: {
            id: this.id,
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.consigneeAddress = res.data.consigneeAddress
            this.consigneeName = res.data.consigneeName
            this.expressCompany = res.data.expressCompany
            this.info = res.data.expressNumber
            this.logisticsInfo = res.data.logisticsInfo
          } else {
            this.$message(res.msg)
          }
        })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  width: 1200px;
  margin: auto;
  .content {
    padding: 0 24px;
    .user_info {
      margin-top: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 30px;
      margin-bottom: 20px;
    }
    .odd_number {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      margin-top: 20px;
      .copy {
        font-size: 14px;
        font-weight: 400;
        color: #cf975a;
        cursor: pointer;
      }
    }
    .steps {
      width: 100%;
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      .item {
        width: 100%;
        height: 82px;
        position: relative;
        padding-left: 42px;
      }
      .item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        width: 12px;
        height: 12px;
        background: #999999;
        border-radius: 50%;
      }
      .item::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 20px;
        width: 1px;
        height: 62px;
        background: #999999;
        border-radius: 50%;
      }
      .item_over::before {
        background: #cf975a;
      }
      .item_over::after {
        background: transparent;
      }
    }
  }
}
</style>
